
import React,{useState}from 'react';

const Index = () => {
    const [msg,setMsg] = useState("")
    const [lists,setList] = useState([])
    const [lister,setLister] = useState([])
    const handChange =(event)=>{
        setMsg(event.target.value)
    };
    const handleEnter=(event)=>{
        if(event.keyCode === 13){
            let index = lists.findIndex((lists)=>lists.name === msg)
            console.log(index);
            if(index === -1){
                setList(()=>{
                    lists.push({
                        name:msg,
                        isShow:false
                    })
                    return [...lists]
                })
              
            }
            setMsg("")
        }
    };
    const handClick =(val)=>{
        // console.log(val);
        var {isShow} = val
        if(isShow === false){
            val.isShow = true
            setLister(()=>{
                lister.push(val)
                return [...lister]
            })
            setList(()=>{
                let index = lists.findIndex((lists)=>lists.name === val.name)
                // console.log(index);
                lists.splice(index,1)
                return [...lists]
            })
        }else{
            val.isShow = false
            setList(()=>{
                lists.push(val)
                return [...lists]
            })
            setLister(()=>{
                let index = lister.findIndex((lister)=>lister.name === val.name)
                // console.log(index);
                lister.splice(index,1)
                return [...lister]
            })
        }
    }
    const handDelete=(val)=>{
        let index = lists.findIndex((lists)=>lists.name === val.name)
        setList(()=>{
            lists.splice(index,1)
            return [...lists]
        })
    }
    const handDeletes=(val)=>{
        let index = lister.findIndex((lister)=>lister.name === val.name)
        setLister(()=>{
            lister.splice(index,1)
            return [...lister]
        })
    }
    return (
        <div>
            <input type="text" value={msg} onChange={handChange}
            onKeyUp={handleEnter}/>
            <h2>未完成</h2>
            {lists.map(item=>{
                return (<div key={item.name}><input type="checkbox" defaultChecked={item.isShow} onClick={()=>handClick(item)} />{item.name}<button onClick={()=>handDelete(item)}>删除</button></div>)
            })}
            <h2>已完成</h2>
            {lister.map(item=>{
                return (<div key={item.name}><input type="checkbox" defaultChecked={item.isShow} onClick={()=>handClick(item)} />{item.name}<button onClick={()=>handDeletes(item)}>删除</button></div>)
            })}
        </div>
    );
}

export default Index;

